<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-6">
			<view class="flex flex-y-center grid-gap-2">
				<image :src="USERINFO.headimg" style="width: 40px;height: 40px;" class="rounded-round"
				@tap="$page.open('/technician/pages/moments/index')"/>
				<view class="flex-1 flex flex-column grid-gap-1">
					<text class="h9 font-weight-600">{{ USERINFO.nickname }}({{ info.name }})</text>
					<view v-if="info.location" class="flex flex-y-flex-end">
						<uni-icons type="location" size="12" color="var(--xl-placeholder)"></uni-icons>
						<text class="h10 text-placeholder">{{ info.location }}</text>
					</view>
				</view>
				<view class="p-4 rounded-4" @tap="chooseLocation" hover-class="bg-white">
					<uni-icons type="location-filled" size="30" color="var(--xl-primary)"></uni-icons>
				</view>
			</view>
			<view class="bg-white rounded-4 flex flex-column grid-gap-4 p-4">
				<view class="flex flex-center grid-gap-2">
					<text class="font-weight-600">数据概览</text>
					<view class="flex-1"></view>
					<text class="h10" v-for="(item, index) in dateArr" :key="index"
						:class="[search.date === item.value ? 'text-primary' : 'text-placeholder']"
						@tap="setSearch('date', item.value)">{{ item.title }}</text>
				</view>
				<view class="grid-columns-6 grid-gap-4">
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.order_num)
							}}</text>
						<view class="h9">订单量</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.order_price)
							}}</text>
						<view class="h9">订单额</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.duration)
							}}</text>
						<text class="h9">分钟</text>
						<view class="h9">服务时长</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ statistics.new_customers }}</text>
						<view class="h9">新客</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.commission)
							}}</text>
						<view class="h9">分佣</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.browse_num)
							}}</text>
						<view class="h9">浏览量</view>
					</view>
				</view>
			</view>
			<AppointmentService v-show="AppointmentServiceShow" v-model:show="AppointmentServiceShow" ref="AppointmentServiceRef" />
			<view class="bg-white rounded-4 p-4 flex flex-column">
				<text class="h8 font-weight-600 text-primary">工作</text>
				<view class="flex-1 grid-gap-4 grid-columns-8 py-2">
					<template v-for="(item, index) in workMenu" :key="index">
						<view class="flex flex-column grid-column-2 flex-center grid-gap-2 hover-bg rounded-4 py-2"
							:key="index" @tap="$page.open(item.page, true)"
							v-if="item.auth ? $auth.auth(item.auth) : true">
							<image :src="item.icon" mode="scaleToFill" style="width: 30px;height: 30px;" />
							<text class="h10 font-weight-500">{{ WebConfigStore.replaceIndustryPersonnelName(item.name)
								}}</text>
						</view>
					</template>
				</view>
			</view>
			<view class="bg-white rounded-4 p-4 flex flex-column">
				<text class="h8 font-weight-600 text-primary">财务</text>
				<view class="flex-1 grid-gap-4 grid-columns-8 py-2">
					<template v-for="(item, index) in financeMenu" :key="index">
						<view class="flex flex-column grid-column-2 flex-center grid-gap-2 hover-bg rounded-4 py-2"
							:key="index" @tap="$page.open(item.page, true)"
							v-if="item.auth ? $auth.auth(item.auth) : true">
							<image :src="item.icon" mode="scaleToFill" style="width: 30px;height: 30px;" />
							<text class="h10 font-weight-500">{{ WebConfigStore.replaceIndustryPersonnelName(item.name)
								}}</text>
						</view>
					</template>
				</view>
			</view>
			<view class="bg-white rounded-4 p-4 flex flex-column">
				<text class="h8 font-weight-600 text-primary">常用功能</text>
				<view class="flex-1 grid-gap-4 grid-columns-8 py-2">
					<template v-for="(item, index) in menu" :key="index">
						<view class="flex flex-column grid-column-2 flex-center grid-gap-2 hover-bg rounded-4 py-2"
							:key="index" @tap="$page.open(item.page, true)"
							v-if="item.auth ? $auth.auth(item.auth) : true">
							<image :src="item.icon" mode="scaleToFill" style="width: 30px;height: 30px;" />
							<text class="h10 font-weight-500">{{ WebConfigStore.replaceIndustryPersonnelName(item.name)
								}}</text>
						</view>
					</template>
				</view>
			</view>
		</view>
		<x-one-click-alarm role="technician" />
		<x-loading v-if="loading"></x-loading>
		<x-resting :info="info" @update="getInfo"/>
	</view>
</template>

<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue';
import { $func, $api, $message, $page, $auth } from '@/utils';
import { useMap } from '@/utils/map'
import { onLoad, onShow,onUnload } from '@dcloudio/uni-app';
import xResting from '@/technician/components/x-resting/x-resting.vue';
import AppointmentService from './modules/AppointmentService.vue';
const AppointmentServiceShow=ref(true);
import { useWebConfigStore, useUserStore, useRefs } from "@/stores";
import { $EventName } from '@/utils/const/env';
const WebConfigStore = useWebConfigStore();
const UserStore = useUserStore();
const { USERINFO } = useRefs(UserStore);
let map: any;
const loading = ref(false);
const search = ref({
	date: 'day'
});
const dateArr = ref([
	{
		title: '今日',
		value: 'day'
	},
	{
		title: '昨日',
		value: 'yesterday'
	},
	{
		title: '本周',
		value: 'week'
	},
	{
		title: '本月',
		value: 'month'
	},
	{
		title: '上月',
		value: 'last_month'
	}
]);
const info = ref({});
const statistics = ref({
	order_num: '--',
	order_price: '--',
	duration: '--',
	new_customers: '--',
	commission: '--',
	browse_num: '--',
});
const workMenu=[
	{
		name: '排班',
		icon: '/static/icons/user/scheduling.png',
		page: '/technician/pages/user/scheduling'
	},
	{
		name: '我的服务',
		icon: '/static/icons/user/my_service.png',
		page: '/technician/pages/user/service'
	},
	{
		name: '服务公海',
		icon: '/static/icons/user/service_selection.png',
		page: '/technician/pages/service/selection'
	}
];
const financeMenu=[
	{
		name: '服务订单',
		icon: '/static/icons/user/order.png',
		page: '/technician/pages/order/list'
	},
	{
		name: '财务明细',
		icon: '/static/icons/user/bill.png',
		page: '/technician/pages/user/wallet/log'
	},
	{
		name: '提现',
		icon: '/static/icons/user/withdrawal.png',
		page: '/technician/pages/user/wallet/withdrawal'
	}
];
const menu = [
	{
		name: '技师信息',
		icon: '/static/icons/user/apply.png',
		page: '/technician/pages/user/index'
	},
	{
		name: '发动态',
		icon: '/static/icons/user/release.png',
		page: '/technician/pages/moments/release'
	},
	{
		name: '收到评价',
		icon: '/static/icons/user/comment.png',
		page: '/technician/pages/user/comment/comment'
	},
	{
		name: '首页推荐',
		icon: '/static/icons/user/home_recommend.png',
		page: '/technician/pages/user/recommend/index'
	},
	{
		name: '邀新有礼',
		icon: '/static/icons/user/gift_box.png',
		page: '/technician/pages/user/gift/index',
		auth: { permission: 'new_technicians_gift_state' }
	},
	{
		name: '技师手册',
		icon: '/static/icons/user/technician_manual.png',
		page: '/pages/article/content?alias=technician_manual'
	},
	{
		name: '所属商户',
		icon: '/static/icons/user/mch.png',
		page: '/technician/pages/mch/index'
	},
];
const setSearch = (key: any, val: any) => {
	search.value[key] = val;
	getStatistics();
}
const getStatistics = () => {
	$api.Technician.statistics(search.value).then((data: any) => {
		statistics.value = data;
	})
}
const getInfo = () => {
	if (!UserStore.hasLogin() || loading.value) return;
	loading.value = true;
	$api.Technician.info().then((data: any) => {
		info.value = data;
		if (map && data.latitude && data.longitude) {
			info.value.location = '获取位置中...';
			map.getAddress([data.longitude, data.latitude]).then((res: any) => {
				info.value.location = res.desc
			}).catch(() => {
				info.value.location = '获取位置失败';
			})
		}
	}).catch(() => {}).finally(() => {
		loading.value = false;
	})
}
const EventNameCHOOSE_LOCATION=`TechnicianChooseLocation${$EventName.CHOOSE_LOCATION}`;
const chooseLocation = () => {
	uni.chooseLocation({
		success: (res: any) => {
			updateLocation(res);
		}
	})
}
const updateLocation = (res: any) => {
	$api.Technician.updateLocation({
		latitude: res.latitude,
		longitude: res.longitude
	}).then(() => {
		getInfo();
	}).catch((err: any) => {
		$message.error(err.msg);
	})
}
const AppointmentServiceRef = ref();

const useInitMap = () => {
	map = useMap();
}
onLoad((options: any) => {
	useInitMap();
	uni.$once($EventName.WEBCONFIG_READY, useInitMap)
	getInfo();
	uni.$on(EventNameCHOOSE_LOCATION, updateLocation)
})
onShow(() => {
	AppointmentServiceRef.value?.getList();
	getStatistics();
	$page.title(WebConfigStore.replaceIndustryPersonnelName('技师中心'));
})
onBeforeUnmount(()=>{
	uni.$off($EventName.WEBCONFIG_READY, useInitMap)
	uni.$off(EventNameCHOOSE_LOCATION, updateLocation)
})
</script>
